<template>
  <div>
    <el-card>
      <el-row type="flex" justify="space-between">
        <el-col />
        <el-col>
          <el-row type="flex" justify="end">
            <el-button type="primary" round @click="addbtn('1','0')">添加权限</el-button>
            <slot name="after" />
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <!-- 结构 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="title" label="权限名称" width="180" />
      <el-table-column prop="code" label="权限标识" width="180" />
      <el-table-column prop="description" label="权限描述" />
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="primary" @click="addbtn('2',row.id)">添加子权限</el-button>
          <el-button @click="diebtn(row.id)">编辑</el-button>
          <el-button type="danger" @click="delbtn(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-row type="flex" justify="center">
      <el-pagination
      :page-size = pageConfig._limit
      :total="total"
      @current-change="currentChange"
      ></el-pagination>
    </el-row>
    <!-- 弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      @close="quxiao"
    >
      <el-form ref="form" :ruler="rules" :model="form" label-width="80px">
        <el-form-item label="权限名称" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="form.code" />
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="form.description" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addbtn2">确认</el-button>
          <el-button @click="quxiao">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getperm, delper, addper, perId, ditper } from "@/api/permissions";
import { listTotree } from "@/utils";
import {getclients,getclientNumber} from '@/api/clients'

export default {
  data() {
    return {
      // 分页
      paging: {
        // 获取条目数
        limit: 3,
        // 获取索引位置
        start: 0,
        page: 1,
        name: "",
      },

      //分页参数
    pageConfig:{
      _limit:2,
      _start:0
    },
    total: 0,
    //前端概念当中的页码
    page:1,
    //  表单校验
    rules:{
      title:[
        {required:true,message:'请输入内容',trigger:'blur'}
      ]
      ,code:[
        {required:true,message:'请输入内容',trigger:'blur'}
      ]
      ,description:[
      {required:true,message:'请输入内容',trigger:'blur'}
      ]
    },
    Agentlist:[],
      tableData: [],
      dialogVisible: false,
      id: '',
      form: {
        title: '', // 查看经纪
        code: '', // 标识
        description: '', // 描述
        pid: '', // 父权限 id 没有的话就是 0
        type: '' // 层级类型 1 或者 2
      },
      total: 0
      // ,page:1,   //当前页码
      // pagesize:4 //每页的数据
    }
  },
  created() {
    this.getperm();
    this.getclients();
    this.getclientNumber()
  },
  methods: {
    async getclientNumber(){
      const {data} = await getclientNumber(this.pageConfig)
      this.total =data
    },
    async getclients(){
       const {data} =await getclients(this.pageConfig)
       this.Agentlist =data
    } ,
    //  分页的change事件
    currentChange(newPage){
      this.page =newPage
      //当前下标等于上一页最后一个，页码减一，乘以每页条数
      this.pageConfig._start =(this.page - 1) * this.pageConfig._limit
      this.getclients()
    },
    //  添加子权限
    addchile() {
      // 打开弹窗
      this.dialogVisible = true
    },
    // 编辑
    async diebtn(id) {
      // 打开弹窗
      this.dialogVisible = true
      // 数据回显
      const res = await perId(id)
      this.form = res.data
      this.id = id
    },
    async getperm() {
      const res = await getperm()
      // 转换树形结构
      const newList = listTotree(res.data, '0')
      this.tableData = newList
      // this.tableData = listTotree(this.tableData, "0");
    },
    // 删除按钮
    delbtn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          // console.log("确认");
          //  删除权限
          await delper(id)
          // 重新渲染
          this.getperm()
        })
        .catch(() => {
          console.log('取消')
        })
    },
    // 新增权限按钮
    async addbtn(type, id) {
      // 打开弹窗
      this.dialogVisible = true
      console.log(type, id, 'type')
      if (type == 1) {
        this.form.pid = '0'
        this.form.type = type
        console.log(this.form, '父级22')
      } else {
        this.form.pid = String(id)
        this.form.type = type
        console.log(this.form, '子级22')
      }
    },
    quxiao() {
      this.dialogVisible = false
      this.form = {
        title: '', // 查看经纪
        code: '', // 标识
        description: '' // 描述
      }
    },
    //  弹窗新增确认
    async addbtn2() {
      console.log(this.form)
      if (this.id === '') {
        // 一级调用新增接口
        await addper(this.form)

        // 重新渲染
        this.getperm()
        // 关闭弹窗
        this.quxiao()
      } else {
        // 编辑接口
        await ditper(this.form)
        // 重新渲染
        this.getperm()
        // 关闭弹窗
        this.quxiao()
      }
    }
  }
}
</script>

<style>
</style>
